<template>
	<view>
		<view>
			<image src="../../static/fanhui.png" class="iconBack" @click="pageToBack"></image>
			<image :src="src" class="bgImage"></image>
			<view class="mainImgBorder">
				<image :src="src" class="mainImg" mode="aspectFill"></image>
			</view>
		</view>
		<view>
			<view class="title1">{{actData.eventName}}</view>
		</view>
		<view class="introduceBorder">
			{{actData.introduce}}
		</view>

		<!-- <view class="title2">活动视频</view>
		<video src="https://cdn.modao.cc/Default_video.mp4" class="actVideo"></video> -->
		<view class="title3">活动详情</view>
		<view>
			<view class="detailBorder"></view>
			<!-- 活动时间 -->
			<view>
				<image src="https://img01-xusong.91q.com/DE36DA09-D10A-43A9-AB86-0EFE9B048620.png"
					class="act_Time_Icon"></image>
				<view class="act_Time_Title">活动时间</view>
				<view class="act_Time_Start_Text">开始时间</view>
				<view class="act_Time_Start_Time">{{actData.startTime}}</view>
				<view class="act_Time_End_Text">结束时间</view>
				<view class="act_Time_End_Time">{{actData.endTime}}</view>
			</view>
			<!-- 活动地点 -->
			<view>
				<image src="https://img01-xusong.91q.com/5B872F41-31EA-4C47-AEC7-078C2B7E1425.png"
					class="act_Position_Icon"></image>
				<view class="act_Position_Title">活动地点</view>
				<view class="act_Position_Text">{{actData.address}}</view>
			</view>
			<!-- 活动类型 -->
			<view>
				<image src="https://img01-xusong.91q.com/CA1759C9-F958-4F1F-B047-7AC2A0643FC2.png"
					class="act_Type_Icon"></image>
				<view class="act_Type_Title">活动类型</view>
				<view class="act_Type_Text">{{actData.type}}</view>
			</view>
			<!-- 所属社团 -->
			<view>
				<image src="https://img01-xusong.91q.com/CE140B80-EB6D-45B7-891C-8329144FD72F.png"
					class="act_Association_Icon"></image>
				<view class="act_Association_Title">所属社团</view>
				<view class="act_Association_Text">{{actData.department}}</view>
			</view>
			<!-- 发起人 -->
			<view>
				<image src="https://img01-xusong.91q.com/7D429AFD-CCEE-43DC-B54E-65B0F9587D9E.png"
					class="act_Originator_Icon"></image>
				<view class="act_Originator_Title">活动主题</view>
				<view class="act_Originator_Text">{{actData.name}}</view>
			</view>
			<!-- 联系方式 -->
			<view>
				<image src="https://img01-xusong.91q.com/1264F182-8E6F-4CA1-A32D-3AC5B9A7A877.png" class="act_Phone_Icon"></image>
				<view class="act_Phone_Title">联系方式</view>
				<view class="act_Phone_Text">2487107665</view>
			</view>
		</view>
		<view class="bottomBorder">
			<view v-if="hasLogin">
				<view @click="like()">
					<image src="https://img01-xusong.91q.com/704D8B80-5566-4A73-BDFE-5AB95274EB5A.png"
						class="shoucangIcon_no" v-if="isFavoite<1"></image>
					<view class="shoucangText_no" v-if="isFavoite<1">收藏</view>
				</view>
				<view @click="cancleFavorite()">
					<image src="https://img01-xusong.91q.com/EF5C044D-B4DB-4B34-8E10-13C1D99B9FAA.png"
						class="shoucangIcon_yes" v-if="isFavoite>=1"></image>
					<view class="shoucangText_yes" v-if="isFavoite>=1" @click="cancleFavorite()">已收藏</view>
				</view>
			</view>
			<view v-if="hasLogin">
				<!-- 修改我们的已签到的样式(这里需要状态) -->
				<view class="sign" @click="isSign()" v-if="is_sign">已签到</view>
				<view class="sign_faqiqiandao" @click="giveASingn()" v-else-if="role=='president'&&showIsInPerson==false">发起签到</view>
				<view class="sign_faqiqiandao" @click="getYourLocation()" v-else-if="role=='members'">签到</view>
				<view class="sign" @click="bandanSign()" v-else="">禁止签到</view>
				<view class="sign" @click="showPersonHasIn()" v-if="showIsInPerson">查看签到成员</view>
			</view>
			<view v-if="hasLogin">
				<view class="enter" v-if="role=='president'" @click="manageAct()">管理活动</view>
				<view class="enter_baomingchenggong" v-else-if="role=='members'" @click="isIn()">报名成功</view>
				<view class="enter_baomingchenggong" v-else-if="role=='pending'" @click="pleaseWait()">审核中</view>
				<view class="enter" v-else @click="uploadMessage()">报名</view>
			</view>
		</view>
		<view class="bottomText">~~已经到底啦~~</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				actData: {},
				imgUrl: 'https://www.codingyt.com/getImage/',
				user_Id: this.$store.state.userInfo.id,
				message: '申请加入活动成功，请等待审核',
				longitude1: 0, //保存我们的插入的信息进去到时候
				latitude1: 0, //
				longitude2: 0,
				latitude2: 0, //记录用户获取自己的地理位置的信息
				eventid: '',
				role: '',
				isFavoite: '',
				startTime: "",
				endTime: "",
				src: '',
				is_sign: false,
				showIsInPerson:false,
				isInfo: this.$store.state.inforOver,
				hasLogin: this.$store.state.hasLogin,
			}
		},
		methods: {
			showPersonHasIn(){
				let that=this
				console.log( that.eventid);
				uni.request({
					url: 'https://www.codingyt.com/club/userEvent/select',
					data: {
						"eventId": that.eventid,
					},
					success(res) {
						console.log('获取到的数据');
						let data=res.data.data
						//去重操作
						let list = [...new Set(data)]
						console.log('去重后的数据是');
						console.log(list);
						uni.navigateTo({
							url: './hasIn?content=' + JSON.stringify(list),
						})
					}
				})
			},
			loading() {
				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 1500,
				})
			},
			bandanSign() {
				uni.showModal({
					content: '你还未报名参加，不能进行签到'
				})
			},
			isSign() {
				uni.showModal({
					content: '你已签到，请勿重复点击'
				})
			},
			cancleFavorite() {
				let that = this
				uni.showModal({
					content: '你确定要取消收藏吗?',
					success() {
						that.isFavoite = 0;
						//发送请求 修改收藏的状态
						uni.request({
							url: 'https://www.codingyt.com/club/favorite/delete',
							data: {
								"userId": that.user_Id,
								"collect": that.eventid,
								"type": "event",
							},
							method: 'POST',
							success(res) {

							}
						})


					}
				})
			},
			pleaseWait() {
				uni.showModal({
					content: '请耐心等待审核',

				})
			},
			manageAct() {
				//跳转到一个当时发布活动页面里面去即可

				uni.navigateTo({
					url: './changeAct?content=' + JSON.stringify(this.actData)
				})
			},
			isIn() {
				let that = this
				uni.showModal({
					content: '你已加入该活动，确定要退出吗？',
					success(res) {
						if (res.confirm) {
							uni.request({
								url: 'https://www.codingyt.com/club/userEvent/delete',
								data: {
									"userId": that.user_Id,
									"eventId": that.eventid,
								},
								method: 'POST',
								success(res) {

									uni.showModal({
										content: '退出成功'
									})
									that.role = ''
								},
							})
						}
					},

				})
			},
			//计算距离的函数
			warn() {
				uni.showModal({
					content: '你已签到,请勿重复签到!',
					success() {

					},
					fail() {

					}
				})
			},

			computer() {
				var radLat1 = this.latitude1 * Math.PI / 180.0;
				var radLat2 = this.latitude2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = this.longitude1 * Math.PI / 180.0 - this.longitude2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10; //s 即为计算出来的距离
				//console.log(s)
				this.distance = s
				return s
				//}
			},
			//获取当前的地理位置
			getYourLocation() { //用户这个时候应该获取到 自己的信息而且还有 当时发布活动的位置（这个时候要传递回来）
				var that = this
				// 这里将逻辑写到这里
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					success(res) {

						that.longitude2 = res.longitude
						that.latitude2 = res.latitude
						var dis = that.computer()

						//这样的话 我们就可以进行存储
						if (dis < 100) {
							uni.showModal({
								content: '签到成功',
								success() {
									//提前将我们的签到状态进行修改
									that.is_sign = true
									//发送请求
									uni.request({
										url: 'https://www.codingyt.com/club/userEvent/insert',
										data: {
											userId: that.user_Id,
											eventId: that.eventid,
											signIn: true
										},
										method: 'POST',
										success(res) {

										}
									})
								}
							})
							//这里把我们的社员的状态改成已签到修改(向后台发送请求 
							//将我们的状态进行修改)
						} else {
							uni.showModal({
								content: '位置过远，请稍等后重新进行签到',

							})
						}
					},
					fail(res) {

					}
				})
			},
			giveASingn() {
				var that = this
				uni.chooseLocation({
					success(suc) {
						//将这个信息保存到数据库里面去 （然后用户已进入这个活动之后 我们就把这个信息存起来 这个应该属于活动的一个记录）
						that.longitude1 = suc.longitude
						that.latitude1 = suc.latitude

						// 书写插入函数
						uni.request({
							url: 'https://www.codingyt.com/club/event/update',
							data: {
								"longitude": that.longitude1,
								"latitude": that.latitude1,
								"id": that.eventid
							},
							method: 'POST',
							success(res) {
								console.log(res.data);
								//发送我们的
								uni.request({
									url:'https://www.codingyt.com/club/userEvent/update',
									method:'POST',
									data:{
										userId: that.user_Id,
										eventId: that.eventid,
										signIn:true,
									},
									success(res) {
										console.log('消息的模块是');
										console.log(res.data);
									}
								})
								uni.showModal({
									content: '发起签到成功，不要随意更改位置',

								})
							}
						})
					},
					fail(fail) {
						// console.log(fail)
					}
				})
			},
			like() {
				let that = this;
				uni.showModal({
					content: '你确定要进行收藏吗？',
					success() {
						uni.request({
							url: 'https://www.codingyt.com/club/favorite/add',
							data: {
								"userId": that.user_Id,
								"collect": that.eventid,
								"type": "event",
							},
							method: 'POST',
							success(res) {
								that.isFavoite = 1; //修改其状态即可

							}
						})
					},
					fail() {

					}
				})
			},
			//发送消息
			uploadMessage() {
				let that = this;
				if (this.isInfo) {
					let userId = this.user_Id
					let msg = this.message
					var flag = this.checkIsOver() //获取我们的返回值
					if (flag == 1) {
						uni.showModal({
							content: '活动还未开始请稍等',
						})
						return;
					}
					if (flag == 2) {
						uni.showModal({
							content: '活动已经结束',
						})
						return;
					}
					uni.showModal({
						content: '你确定要报名吗?',
						success(res) {
							if (res.confirm) {
								uni.request({
									url: 'https://www.codingyt.com/club/message/insert', //仅为示例，并非真实接口地址。
									method: 'POST',
									dataType: 'json',
									data: {
										msg,
										userId
									},
									success: (res) => {
										uni.request({
											url: 'https://www.codingyt.com/club/userEvent/insert',
											method: 'POST',
											data: {
												"userId": that.user_Id,
												"eventId": that.eventid,
												"role": "pending"
											},
											success() {
												uni.showModal({
														content: '报名成功，请耐心等待审核通过'
													}),
													that.role = 'pending'
											},
										})
									}
								});
							} else if (res.cancel) {

							}
						}
					})
				} else {
					uni.showModal({
						content: '你未完善个人信息，请完善信息之后进行报名'
					})
				}
			},
			pageToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getRole() {
				let that = this;
				uni.request({
					url: 'https://www.codingyt.com/club/userEvent/select',
					data: {
						userId: this.user_Id,
						eventId: this.eventid,
					},
					success(res) {
						that.is_sign = res.data.data[0].signIn
						that.role = res.data.data[0].role
						
						if(that.is_sign===true&&that.role==='president'){
							that.showIsInPerson=true;
						}
						
					}
				})
			},
			getIsFavorite() {
				let that = this;
				uni.request({
					url: 'https://www.codingyt.com/club/favorite/have',
					data: {
						userId: this.user_Id,
						collect: this.eventid,
						type: 'event',
					},
					success(res) {
						that.isFavoite = res.data.data
					}
				})
			},
			//检查是不是已经结束了 我们的活动
			checkIsOver() {
				var startTime = Date.parse(this.startTime);
				var endTime = Date.parse(this.endTime);
				var curTime = new Date().getTime() //获取当前的时间戳
				if (startTime - curTime > 0) {
					return 1; //代表还未开始
				}
				if (endTime - curTime < 0) {
					return 2; //代表已经结束
				}
				return 0; //代表正常进行
			}
		},
		// 没有获取到这个用户在这个活动下面的角色是什么
		onLoad(val) {
			this.loading()
			let that = this
			let data = JSON.parse(val.content)
			this.actData = data
			this.eventid = data.id
			this.latitude2 = data.latitude
			this.longitude2 = data.longitude
			this.startTime = data.startTime
			this.endTime = data.endTime
			this.getRole();
			this.getIsFavorite()
			try {
				if ((this.actData.imgId.search("https://www.codingyt.com") != -1)) {
					this.src = this.actData.imgId
					return;
				}
			} catch (err) {

			}
			if (this.actData.imgId != undefined) {
				this.src = this.imgUrl + this.actData.imgId;

			} else {
				this.src = this.imgUrl + this.actData.img_id;

			}
		},
		created() {

		},
	}
</script>

<style scoped>
	.iconBack {
		left: 36rpx;
		top: 98rpx;
		width: 48rpx;
		height: 48rpx;
		z-index: 50;
		position: absolute;
	}

	.bgImage {
		left: -30rpx;
		top: 0rpx;
		width: 900rpx;
		height: 420rpx;
		opacity: 0.7;
		border-radius: 0rpx 0rpx 80rpx 80rpx;
		position: absolute;
		filter: blur(40rpx);
	}

	.mainImgBorder {
		left: 110rpx;
		top: 210rpx;
		width: 596rpx;
		height: 370rpx;
		position: absolute;
	}

	.mainImg {

		width: 90%;
		height: 90%;
		border-radius: 30rpx;
		position: absolute;
	}

	.title1 {
		left: 46rpx;
		top: 580rpx;
		width: 500rpx;
		height: 58rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 40rpx;
		text-align: left;
		;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.introduceBorder {
		left: 57rpx;
		top: 678rpx;
		width: 580rpx;
		height: 248rpx;
		line-height: 40rpx;
		border-radius: 26rpx;
		background-color: rgba(255, 255, 255, 100);
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		color: rgba(155, 155, 155, 100);
		font-size: 28rpx;
		text-align: left;
		padding-left: 40rpx;
		padding-right: 20rpx;
		padding-top: 17rpx;
		;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
	}

	.title2 {
		left: 46rpx;
		top: 990rpx;
		width: 160rpx;
		height: 58rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 40rpx;
		text-align: left;
		;
		position: absolute;
	}

	.actVideo {
		left: 64rpx;
		top: 1062rpx;
		width: 630rpx;
		height: 284rpx;
		position: absolute;
	}

	.title3 {
		left: 58rpx;
		top: 1016rpx;
		width: 160rpx;
		height: 58rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 40rpx;
		text-align: left;
		;
		position: absolute;
	}

	.detailBorder {
		left: 46rpx;
		top: 1122rpx;
		width: 656rpx;
		height: 590rpx;
		line-height: 40rpx;
		border-radius: 26rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.act_Time_Icon {
		left: 76rpx;
		top: 1164rpx;
		width: 34rpx;
		height: 38rpx;
		position: absolute;
	}

	.act_Time_Title {
		left: 122rpx;
		top: 1160rpx;
		width: 112rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Time_Start_Text {
		left: 122rpx;
		top: 1218rpx;
		width: 96rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Time_Start_Time {
		left: 234rpx;
		top: 1218rpx;
		width: 288rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Time_End_Text {
		left: 122rpx;
		top: 1272rpx;
		width: 96rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Time_End_Time {
		left: 234rpx;
		top: 1272rpx;
		width: 288rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Position_Icon {
		left: 72rpx;
		top: 1334rpx;
		width: 38rpx;
		height: 42rpx;
		position: absolute;
	}

	.act_Position_Title {
		left: 122rpx;
		top: 1332rpx;
		width: 112rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Position_Text {
		left: 122rpx;
		top: 1386rpx;
		width: 600rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Type_Icon {
		left: 76rpx;
		top: 1454rpx;
		width: 34rpx;
		height: 38rpx;
		position: absolute;
	}

	.act_Type_Title {
		left: 122rpx;
		top: 1450rpx;
		width: 112rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Type_Text {
		left: 122rpx;
		top: 1506rpx;
		width: 120rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Association_Icon {
		left: 324rpx;
		top: 1450rpx;
		width: 42rpx;
		height: 46rpx;
		position: absolute;
	}

	.act_Association_Title {
		left: 378rpx;
		top: 1450rpx;
		width: 112rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Association_Text {
		left: 378rpx;
		top: 1506rpx;
		width: 72rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		;
		position: absolute;
	}

	.act_Originator_Icon {
		left: 76rpx;
		top: 1574rpx;
		width: 34rpx;
		height: 38rpx;
		position: absolute;
	}

	.act_Originator_Title {
		left: 122rpx;
		top: 1572rpx;
		width: 300rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Originator_Text {
		left: 122rpx;
		top: 1624rpx;
		width: 550rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.act_Phone_Icon {
		left: 324rpx;
		top: 1568rpx;
		width: 42rpx;
		height: 46rpx;
		position: absolute;
	}

	.act_Phone_Title {
		left: 378rpx;
		top: 1568rpx;
		width: 112rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
	}

	.act_Phone_Text {
		left: 378rpx;
		top: 1624rpx;
		width: 200rpx;
		height: 38rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 24rpx;
		text-align: left;
		  ;
		position: absolute;
	}

	.bottomBorder {
		left: 0rpx;
		top: 1485rpx;
		width: 750rpx;
		height: 140rpx;
		line-height: 40rpx;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		z-index: 5;
	}

	.shoucangIcon_no {
		left: 56rpx;
		top: 12rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shoucangText_no {
		left: 64rpx;
		top: 66rpx;
		width: 52rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 70);
		font-size: 26rpx;
		text-align: left;
		;
		position: absolute;
	}

	.shoucangIcon_yes {
		left: 56rpx;
		top: 12rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shoucangText_yes {
		left: 51rpx;
		top: 66rpx;
		width: 80rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 70);
		font-size: 26rpx;
		text-align: left;
		;
		position: absolute;
	}

	.sign {
		left: 158rpx;
		top: 20rpx;
		width: 240rpx;
		height: 78rpx;
		border-radius: 14rpx;
		background-color: rgba(206, 206, 206, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		font-family: Microsoft Yahei;
		position: absolute;
	}

	.sign_faqiqiandao {
		left: 158rpx;
		top: 20rpx;
		width: 240rpx;
		height: 78rpx;
		border-radius: 14rpx;
		background-color: rgba(249, 193, 110, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		font-family: Microsoft Yahei;
		position: absolute;
	}

	.enter {
		left: 424rpx;
		top: 20rpx;
		width: 304rpx;
		height: 78rpx;
		border-radius: 14rpx;
		background-color: rgba(249, 193, 110, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		font-family: Microsoft Yahei;
		position: absolute;
	}

	.enter_baomingchenggong {
		left: 424rpx;
		top: 20rpx;
		width: 304rpx;
		height: 78rpx;
		border-radius: 14rpx;
		background-color: rgba(206, 206, 206, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		line-height: 76rpx;
		text-align: center;
		font-family: Microsoft Yahei;
		position: absolute;
	}

	.bottomText {
		left: 284rpx;
		top: 1850rpx;
		width: 400rpx;
		height: 200rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 26rpx;
		text-align: left;
		;
		position: absolute;
	}
</style>
